Every OnWeight screen is assembled from one kit (fc-shared.jsx), so screens stay identical. This documents each component — its variants, states, sizing and usage rules — sitting one layer up from Foundations (the tokens) and one below the screens. Specimens render in the Balanced theme.
The signature data view — the decided chart, consolidated here from Chart Explorer. Daily weigh-ins as a soft band around the smooth EWMA trend, the cycle-adjusted plan line, and the limit marker.
Anatomy
EWMA trend (ink) · raw dots in a soft band · dashed cycle-adjusted plan · accent limit marker. Tap a point → dark readout pill.
Variants
Trend · week-compare · fight-week water-cut · noise band — the interactive set lives in Chart Explorer.
Rule
Read the line, not the dots. Tabular figures; red reserved for the limit.
04 Conversion & onboarding
Introduced by the BFM design audit (Jun 2026) and shared across the funnel. See Logic & Flows §18.8 and OnWeight - Social Proof Research.md.
ProofBand sport · quote · compact
The social-proof band — a distinct full-bleed editorial block (not a Card), so proof never reads as card-on-card. Reused on the paywall (full, with quote) and the Coach's Read (compact, no quote).
The standard you're held to
88–95%of MMA fighters cut to make weight
"The weight cut is the hardest part of the fight."Robert Whittaker · ex-UFC champion
Keep a fight-week cut under ~5% of body weight to protect power and recovery.
Anatomy
mono eyebrow → sport stat (hero) → supporting line → optional real fighter quote (serif italic, tap to cycle) → safety footnote.
Variants
full (paywall, quote on) · compact (Coach's Read — stat + line + footnote, no quote).
Content
Sport stat from FC_SOCIAL_PROOF (falls back to combat-wide 60–80%); quotes from FC_FIGHTER_QUOTES (real, verbatim, attributed). No fabricated user counts — OnWeight is pre-launch.
Rule
Full-bleed, never wrapped in a Card. Assumes a 20px-padded parent. One per screen.
Component
ProofBand in fc-screens-b.jsx.
Division picker limit screen · OnbGoalWeight
"Your limit" leads with a one-tap class list — the natural class starred, the scale target autofilled (gear allowance applied) — with the keypad kept below as the custom fallback. Lowers load and proves the bespoke per-sport logic.
Tap your classor type a custom limit
Lightweight Natural70.3 kg
Featherweight65.3 kg
Row
class name · Natural tag on the recommended class · autofilled scale target (division limit − equipment) · radio check.
Selection
Tap fills the keypad value; selected row = accent-soft fill + filled accent radio. Manual entry stays the escape hatch (gates GoalOutOfRange beyond ±20 kg).
Source
Ladder + gear allowance from FC_SPORTS[sport].divisions[sex] / recommendDivision() (fc-engine.jsx); see Logic & Flows §14.4.
Component
OnbGoalWeight in fc-onboarding.jsx.
05 Chrome
LargeTitle · DashBanner
The top of a screen — eyebrow + title + trailing gear, and the state strip above it.